<template>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">考生管理</font></font><small><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">文件录入</font></font></small></h2>

                <div class="clearfix"></div>
            </div>
            <div class="x_content">

                <form class="form-horizontal form-label-left" novalidate="" @submit.prevent="submit">

                    <span class="section"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">个人信息<span class="dowload"><button type="button" class="btn btn-primary" @click.prevent.stop="exportExcel">请下载模板</button></span></font></font></span>
                        <div class="item form-group">
                                <el-alert class="mar-top-15" title="只能上传xlsx/xls文件，且不超过10M" type="error" :closable="false"></el-alert>
                            <el-upload
                                action=""
                                class="el-upload-dragger"
                                :auto-upload="false"
                                :on-change="loadJsonFromFile"
                                :limit="1"
                                multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            </el-upload>
                    </div>
                </form>
                <button @click="preview" class="btn btn-success btn-xs" style="float:right;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">点击预览</font></font></button>
                <el-container>
                    <el-dialog :visible.sync="dialogVisible" width="50%" style=" text-align: center;" :before-close="handleClose">
                                <!-- <repassword></repassword> -->
                            <div class="x_content">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">题干</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">选项A</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">选项B</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">选项C</font></font></th>
                            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">答案</font></font></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in upload_Data">
                            <th scope="row"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{{item.tigan}}</font></font></th>
                            <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{{item.a}}</font></font></td>
                            <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{{item.b}}</font></font></td>
                            <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{{item.c}}</font></font></td>
                                <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">{{item.d}}</font></font></td>
                        </tr>
                    </tbody>
                </table>

            </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button  type='success' @click="submit">确 定</el-button>
                    </span>
                    </el-dialog>
                </el-container>

            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
        uploadFilename: null,
        uploadFiles: [],
        dialogVisible: false,
        tableData:[],
        is_preview:false,
        upload_Data:[],
        successful:false
        }
    },
    methods: {
        submit(){
            axios({
                url:'http://127.0.0.1:8000/api/ti_ku/',
                method:'post',
                data:this.upload_Data,
            }).then(res=>{
                if(res.code==200){
                    this.is_preview=false
                }
            })
        },
        preview(){
            if(this.is_preview){
                this.dialogVisible=true
            }
            else{
                alert('请先上传')
            }

        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        exportExcel() {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../vendor/Export2Excel');
                const tHeader = ['题干', '选项A','选项B','选项C','答案'];
                // 上面设置Excel的表格第一行的标题
                const filterVal = ['tigan', 'c','a','b','d'];
                // 上面的index、nickName、name是tableData里对象的属性
                const list = this.tableData;  //把data里的tableData存到list
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, 'student_mes');
            })
        },

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },
        loadJsonFromFile(file){
            this.demo='sadsadsa'
            let _this = this;
            let extName = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();
            let filesize = file.size/(1024*1024)
            if(filesize<10){
                if(extName== '.xls' || extName == '.xlsx' ){

                    let inputDOM = this.$refs.inputer;
                    // 通过DOM取文件数据
                    this.file = event.currentTarget.files[0];
                    var rABS = false; //是否将文件读取为二进制字符串
                    var f = this.file;
                    var reader = new FileReader();
                    FileReader.prototype.readAsBinaryString = (f) => {
                        var binary = "";
                        var rABS = false; //是否将文件读取为二进制字符串
                        var pt = this;
                        var wb; //读取完成的数据
                        var outdata;
                        var reader = new FileReader();
                        reader.onload =(e) => {
                            var bytes = new Uint8Array(reader.result);
                            var length = bytes.byteLength;
                            for (var i = 0; i < length; i++) {
                                binary += String.fromCharCode(bytes[i]);
                            }
                            var XLSX = require("xlsx");
                            if (rABS) {
                                wb = XLSX.read(btoa(fixdata(binary)), {
                                //手动转化
                                type: "base64"
                                });
                            } else {
                                wb = XLSX.read(binary, {
                                type: "binary"
                                });
                            }
                            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
                                var data=[]
                                var mes={}
                                for(var i =0;i<outdata.length;i++){
                                    mes={}
                                    for(var key in outdata[i]){
                                        if(key=='题干'){
                                            mes['tigan']=outdata[i][key]
                                        }
                                        else if(key=='选项A'){
                                            mes['a']=outdata[i][key]
                                        }
                                        else if(key=='选项B'){
                                            mes['b']=outdata[i][key]
                                        }
                                        else if(key=='选项C'){
                                            mes['c']=outdata[i][key]
                                        }
                                        else if(key=='答案'){
                                            mes['d']=outdata[i][key]
                                        }
                                    }
                                    data.push(mes)
                                }
                        this.upload_Data=data
                    };
                    reader.readAsArrayBuffer(f);
                }
                if (rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            }else{
                alert('请选择正确的文件类型')
            }
            }else{
                alert('文件超过10M，请选择小于10M的文件')
            }
        }
    },
    watch: {
        upload_Data:{
            handler(val,oldval){
                this.is_preview=true
            },
        deep:true, //深度解析
        },
    },
}
</script>

<style scoped>
.form-group {
    text-align: -webkit-center;
}
.item input{
    display: contents;
}
.el-upload-dragger{
    width: 100%;
    height: 260px;
    margin-top: 30px;
}
.el-alert{
    display:inherit;

}
.dowload{
    float: right;
    margin-top: -3PX;
}
.table>thead>tr>th{
    text-align: center;
}
</style>
